<template>
  <div>
    <el-card>
      <CategorySelector :isShowList="isShowList" @changeCategory="changeCategory"></CategorySelector>
    </el-card>
    <el-card style="margin-top: 20px">
      <!--      父组件 列表页面-->
      <div v-show="!isShowSpuForm&&!isShowSkuForm">
        <el-button type="primary" icon="el-icon-plus" @click="addSpu">添加SPU</el-button>
        <el-table
          :data="spuList"
          style="width: 100%" border>
          <el-table-column
            prop="prop"
            align="center"
            type="index"
            label="序号"
            width="80">
          </el-table-column>
          <el-table-column
            prop="spuName"
            label="Spu名称"
            width="width">
          </el-table-column>
          <el-table-column
            prop="description"
            label="SPU描述"
            width="width">
          </el-table-column>
          <el-table-column
            prop="prop"
            label="操作"
            width="width">
            <template slot-scope="{row,$index}">
              <HintButton type="success" size="mini" icon="el-icon-plus" title="添加SKU" @click="addSku(row)"></HintButton>
              <HintButton
                type="warning"
                size="mini" icon="el-icon-edit"
                title="修改SPU"
                @click="updateSpu(row)"
              ></HintButton>
              <HintButton type="info" size="mini" icon="el-icon-info" title="查看SPU的SKU列表"></HintButton>
              <HintButton type="danger" size="mini" icon="el-icon-delete" title="删除SPU"
                          @click="deleteSpu(row)"></HintButton>
            </template>

          </el-table-column>
        </el-table>
        <!--        分页器  -->
        <el-pagination
          background
          @current-change="getSpuList"
          @size-change="handleSizeChange"
          :current-page="page"
          align="center"
          :page-sizes="[3, 5, 7]"
          :page-size="limit"
          :pager-count="7"
          layout=" prev, pager, next, jumper, ->, sizes, slot,total"
          :total="total">
        </el-pagination>
      </div>
      <SkuForm v-show="isShowSkuForm" ref="sku" ></SkuForm>
      <SpuForm
        v-show="isShowSpuForm"
        ref="spu"
        :visible.sync="isShowSpuForm"
        @backSuccess="backSuccess"
        @cancelBack="cancelBack"
      ></SpuForm>
    </el-card>
  </div>
</template>

<script>
import SkuForm from "@/views/product/spu/components/SkuForm";
import SpuForm from "@/views/product/spu/components/SpuForm";

export default {
  name: "Spu",
  components: {
    SkuForm,
    SpuForm
  },
  data() {
    return {
      isShowList: true,//这个值这里用来控制三级联动的可操作性的，它没有控制页面的显示
      category1Id: '',
      category2Id: '',
      category3Id: '',
      spuList: [],
      isShowSpuForm: false,
      isShowSkuForm: false,
      page: 1,
      limit: 3,
      total: 0,
    }
  },
  methods: {
    //三级联动
    changeCategory({categoryId, level}) {
      if (level === 1) {
        this.category2Id = ''
        this.category3Id = ''
        this.spuList = []
        this.category1Id = categoryId
      } else if (level === 2) {
        this.category3Id = ''
        this.spuList = []
        this.category2Id = categoryId
      } else {
        this.category3Id = categoryId
        this.getSpuList()//点击三级联动的时候获取spuList
      }
    },
    handleSizeChange(size) {
      this.limit = size
      this.getSpuList()
    },
    //发送请求获取spu的分页列表数据
    async getSpuList(pager = 1) {
      this.page = pager
      let {page, limit, category3Id} = this
      try {
        const result = await this.$API.spu.getList(page, limit, category3Id)
        if (result.code === 200 || result.code === 20000) {
          /*    console.log(result.data)*/
          this.spuList = result.data.records
          this.total = result.data.total
        }
      } catch (error) {
        this.$message.error('获取spu列表失败')
      }

    },
    //点击修改spu 需要发4个请求 需要在父组件中调用 子组件中写
    updateSpu(row) {
     this.isShowList=false
      this.flag = row.id
      this.isShowSpuForm = true
      this.$refs.spu.getInitUpdateSpuFormData(row, this.category3Id)
    },
    //点击添加SPU需要发2个请求 需要在父组件中调用 子组件中写
    addSpu() {
      this.isShowSpuForm = true
      this.$refs.spu.getInitAddSpuFormData(this.category3Id)
    },
    //调用 子组件的函数 知道回来了
    backSuccess() {
      //判断是怎么回来的
      if (this.flag) {
        //修改回来的
        this.getSpuList(this.page)
      } else {
        //增加回来的
        this.getSpuList()
      }
      this.flag = null // 重置标志位
    },
    // 取消回来的
    cancelBack() {
      this.flag = null//重置标志位
    },
    //点击删除spu按钮 删除一项
    async deleteSpu(row) {
      try {
        const result = await this.$API.spu.remove(row.id)
        if (result.code === 200 || result.code === 20000) {
          this.$message.success('删除spu成功')
          //有分页器 如果列表的长度为1 返回当前页 如果是1 去上一页
          await this.getSpuList(this.spuList.length > 1 ? this.page : this.page - 1)
        }
      } catch (error) {
        this.$message.error('删除spu请求失败')
      }
    },
    //点击添加sku 显示sku页面
    addSku(row){
      this.isShowSkuForm=true
      this.$refs.sku.getInitSkuFormData(row,this.category1Id,this.category2Id,this.category3Id)
    }
  }
}
</script>

<style>

</style>
